$(function (){
    function sendReq(itemId){
        var formData = $('#updatecart').serialize();
        $.ajax({
            type    :   'POST',
            url     :   'http://localhost:8080/mypetstore/cartUpdate',
            data    :   formData,
            success :   function(data){
                var pattern     = data[0].toFixed(2),
                    pattern1    = data[1].toFixed(2),
                    listprice = document.getElementById(itemId),
                    totalprice  = document.getElementById('total-price');

                pattern = "$" + pattern;
                pattern1 = "$" + pattern1;
                listprice.innerText = pattern;
                totalprice.innerText = pattern1;
            },
            error   :   function(errorMsg){
                console.log(errorMsg);
            }
        });
    }

    var input       = document.getElementsByClassName("cell-quantity-input"),
        add         = document.getElementsByClassName("cell-quantity-btn"),
        sub         = document.getElementsByClassName("cell-quantity-button"),
        checkbox    = document.getElementById("test"),
        checkboxes  = document.getElementsByClassName("checkboxes");
    var inputLen    = input.length,
        addLen      = add.length,
        subLen      = sub.length,
        checkLen    = checkboxes.length;

    for(var i = 0; i < addLen; i ++){
        $(add[i]).on('click', function(e){
            var input = e.target.parentElement.parentElement.children[2].children[0];
            var value = input.value;
            value ++;
            input.value = value;
            if(value == 2){
                e.target.parentElement.parentElement.children[0].children[0].disabled = false;
            }
            var itemId  = e.target.parentElement.parentElement.parentElement.children[1].innerText;
            sendReq(itemId);
        })
    }

    for(var i = 0; i < subLen; i ++){
        $(sub[i]).on('click', function(e){
            var input = e.target.parentElement.parentElement.children[2].children[0];
            var value = input.value;
            if(value == 1){
                console.log(btn);
                btn.disabled = true;
            }else{
                value --;
                input.value = value;
                var itemId  = e.target.parentElement.parentElement.parentElement.children[1].innerText;
                sendReq(itemId);
            }
        })
    }

    for(var i = 0;i < inputLen; i++){
        $(input[i]).on('change', function(e){
            var vaule   = e.target.value,
                itemId  = e.target.parentElement.parentElement.parentElement.children[1].innerText;
            console.log(vaule);
            sendReq(itemId);
        })
    }


    $(checkbox).change(function(){
        if ($(checkbox).is(':checked')){
            var items;
            for(var i = 0; i < checkLen; i++){
                checkboxes[i].checked = true;
                // items.add(checkboxes[i].parentElement.parentElement.parentElement.children[1].innerText);

            }
            $.ajax({
                type    :   'GET',
                url     :   'http://localhost:8080/mypetstore/addscart',
                success :   function(data){
                    var pattern    = data.toFixed(2),
                        totalprice  = document.getElementById('total-price');
                    pattern = "$" + pattern;
                    totalprice.innerText = pattern;
                },
                error   :   function(errorMsg){
                    console.log(errorMsg);
                }
            });
        }

    })

    for( var i = 0; i < checkLen; i++){
        $(checkboxes[i]).change(function(e){
            var myCheckBox = e.target;
            var itemId = myCheckBox.parentElement.parentElement.parentElement.children[1].innerText;
            if(($(myCheckBox).is(':checked'))){
                $.ajax({
                    type    :   'GET',
                    url     :   'http://localhost:8080/mypetstore/addcart?itemId=' + itemId,
                    success :   function(data){
                        var pattern    = data.toFixed(2),
                            totalprice  = document.getElementById('total-price');
                        pattern = "$" + pattern;
                        totalprice.innerText = pattern;
                    },
                    error   :   function(errorMsg){
                        console.log(errorMsg);
                    }
                });

            }else{
                $.ajax({
                    type    :   'GET',
                    url     :   'http://localhost:8080/mypetstore/removecart?itemId=' + itemId,
                    success :   function(data){
                        var pattern    = data.toFixed(2),
                            totalprice  = document.getElementById('total-price');
                        pattern = "$" + pattern;
                        totalprice.innerText = pattern;
                    },
                    error   :   function(errorMsg){
                        console.log(errorMsg);
                    }
                });
            }
        })
    }

});

// var TB = document.getElementById('product-table');
// $(TB).on('click', function (){
//     console.log("!");
// });
// console.log(content)
// content.onclick = function (){
//     console.log(content)
// }

// var content = document.getElementsByClassName("cell-quantity-input")

// TB.onclick = function (e){
//     if(e.target.className === 'cell-quantity-input'){
//         var input   = e.target,
//             itemId  = e.target.parentElement.parentElement.parentElement.children[1].innerText,
//             value   = e.target.innerText;
//         console.log(value);
// var item    = document.getElementById(itemId),
//     id      = '#' + itemId;
// console.log(id);

// input.onblur = function (){
//     var nowvalue = e.target.innerText;
//     console.log(nowvalue);
//     if (nowvalue !== value){
//         var formData = $('#updatecart').serialize();
//         $.ajax({
//             type    :   'POST',
//             url     :   'http://localhost:8080/mypetstore/cartUpdate',
//             data    :   formData,
//             success :   function(data){
//                 var aaa = document.getElementById('total-price'),
//                     bbb = document.getElementById(itemId);
//                 console.log(aaa.innerText);
//                 bbb.innerText = data[0];
//                 aaa.innerText = data[1];
//                 var innerFMT = '';
//                 innerFMT += "<span>";
//                 innerFMT += "<fmt:formatNumber  value=\"${";
//                 innerFMT += data[1];
//                 innerFMT += "}\" pattern=\"$#,##0.00\" />"
//                 innerFMT += "</span>";
//                 aaa.innerText = innerFMT;
//                 console.log(innerFMT);
//
//             },
//             error   :   function(errorMsg){
//                 console.log(errorMsg);
//             }
//         });
//     }
//
// }
// }
// if(e.target.className === 'cell-quantity-btn'){
//     console.log("cell-quantity-btn");
// }

// }

//不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
//
// 只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。